<template>
    <n-form
        ref="formRef"
        label-placement="left"
        :label-width="140"
        :model="form"
        :rules="rules"
    >
        <n-form-item label="标题" path="title">
            <n-input v-model:value="form.title" placeholder="请输入标题" />
        </n-form-item>
        <n-form-item label="规定完成时间" path="specifiedFinishTime">
            <n-date-picker
                v-model:value="form.specifiedFinishTime"
                update-value-on-close
                type="datetime"
                :actions="null"
                :is-date-disabled="disablePreviousDate"
            />
        </n-form-item>

        <n-form-item label="优先级" path="priorityLevel">
            <jb-select
                v-model:value="form.priorityLevel"
                url="/api/admin/dictionary/options?typeKey=sys_notice_priority_level"
                class="w-140px"
                placeholder="=优先级="
            >
            </jb-select>
        </n-form-item>

        <n-form-item label="状态" path="state">
            <jb-select
                v-model:value="form.state"
                url="/api/admin/dictionary/options?typeKey=todo_state"
                class="w-140px"
                placeholder="=状态="
            >
            </jb-select>
        </n-form-item>

        <n-form-item label="类型" path="type">
            <jb-select
                v-model:value="form.type"
                url="/api/admin/dictionary/options?typeKey=todo_type"
                placeholder="=类型="
                class="w-140px"
            >
            </jb-select>
        </n-form-item>
        <n-form-item v-if="form.type == '3' || form.type == '4'" label="URL">
            <n-input v-model:value="form.url" placeholder="请输入URL" />
        </n-form-item>

        <n-form-item
            v-if="form.type == '4' || form.type == '2'"
            label="内容"
            path="content"
        >
            <jb-editor v-model="form.content" class="h-400px"></jb-editor>
        </n-form-item>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        id: string
    }>(),
    {
        id: ''
    }
)
function disablePreviousDate(ts: number) {
    return ts < Date.now()
}

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface AccountType {
    id: string
    title: string
    specifiedFinishTime: null
    priorityLevel: string
    state: string
    type: string
    url: string
    content: string
}
const form = useResetableData<AccountType>({
    id: '',
    title: '',
    specifiedFinishTime: null,
    priorityLevel: '1',
    state: '1',
    type: '1',
    content: '',
    url: ''
})
watch(
    () => form.content,
    (newV) => {
        console.debug('content', newV)
    }
)
const rules: FormRules = {
    title: new Rules().required('请输入标题').value,
    specifiedFinishTime: new Rules().required('请选择规定完成时间').value,
    priorityLevel: new Rules().required('请选择优先级').value,
    state: new Rules().required('请选择当前状态').value,
    type: new Rules().required('请选择类型').value,
    content: new Rules().required('请输入内容').value
}

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()

    let url = props.id ? '/api/admin/todo/update' : '/api/admin/todo/save'
    await JBoltApi.tryPost(url, form)
    return true
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/todo/${props.id}`).then(({ error, result }) => {
        if (error) return
        result.data.specifiedFinishTime = new Date(
            result.data.specifiedFinishTime
        ).getTime()
        result.data.priorityLevel = result.data.priorityLevel + ''
        result.data.state = result.data.state + ''
        result.data.type = result.data.type + ''
        form._reset(result.data)
        console.debug(form)
    })
}

onMounted(() => {
    if (props.id) {
        loadEditData()
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
